<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<div style="width: 200px;margin: 100px  auto; text-align: center">
    <button onclick="showName();">点名程序</button>
    <div style="margin-top: 50px;text-align: center">
        <img src="img/s1.jpg" id="randomImg"/>
    </div>
    <div id="result"
         style="font-size: xx-large;font-weight:bold; width: 200px;height:200px;text-align: center;line-height: 200px;border: 1px solid red;">
    </div>
</div>
</body>
<script>
    var arr = ["周志高", "柯为", "张妮", "龙云锦", "付良辰", "熊琦琦", "刘佳伟", "魏启超", "柯俊", "叶梦蝶", "章锐林", "黄田昌", "胡瑞", "李科君", "高昕", "李文尧", "童鑫", "任凯迪", "任佳音", "熊润泽", "王玲", "万鑫", "李文杰", "曾卓", "夏冰心", "章文", "徐书生", "郭梦婷", "黄彬瑶", "张飞", "马伟", "刘斌"];
    var result = document.getElementById("result");
    var img = document.getElementById("randomImg");
    function showName() {
        var i = 0;
        var timer = setInterval(function () {
            i++;
            if (i == 30) {
                clearInterval(timer);
            }
            var src = Math.floor(Math.random() * 5) + 1;
            img.src = "img/s" + src + ".jpg";
            var index = Math.floor(Math.random() * arr.length);
            result.innerHTML = arr[index];
        }, 100)
    }

</script>
</html>